<template>
  <div class="app-container">
    <span>搜索内容：</span>
    <el-input style="width: 150px; padding: 10px" v-model="keyword" placeholder="请输入内容"></el-input>
    <el-button type="primary" round @click="handleSearch">搜索</el-button>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" label="ID" width="110">
        <template slot-scope="scope">
          {{ scope.row.id }}
        </template>
      </el-table-column>
      <el-table-column label="用户名" width="150">
        <template slot-scope="scope">
          {{ scope.row.username }}
        </template>
      </el-table-column>
      <el-table-column label="手机号" width="150">
        <template slot-scope="scope">
          {{ scope.row.phone }}
        </template>
      </el-table-column>
      <el-table-column label="昵称" width="150">
        <template slot-scope="scope">
          {{ scope.row.nickname }}
        </template>
      </el-table-column>
      <el-table-column label="头像" width="200" align="center">
        <template slot-scope="scope">
          <el-image
            style="width: 100px; height: 100px"
            :src="scope.row.avatar"
            :preview-src-list="[scope.row.avatar]">
          </el-image>
        </template>
      </el-table-column>
      <el-table-column label="是否实名" width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.isAuthIdentity === 1 ? '是' : '否' }}
        </template>
      </el-table-column>
      <el-table-column label="是否有转赠权限" width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.isGiveBalance === 1 ? '是' : '否' }}
        </template>
      </el-table-column>
      <el-table-column label="余额" width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.balance  }}
        </template>
      </el-table-column>
      <el-table-column label="佣金" width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.totalProfit  }}
        </template>
      </el-table-column>
      <el-table-column label="账号状态" width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.enabled === 1 ? '启用' : '禁用' }}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="created_at" label="创建时间" width="200">
        <template slot-scope="scope">
          <i class="el-icon-time"/>
          <span>{{ scope.row.createTime }}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button v-if="scope.row.enabled === 1" size="mini" type="primary" round @click="dialogFormVisible = true; disabledUser.userId=scope.row.id">
            账号禁用
          </el-button>
          <el-button v-if="scope.row.enabled !== 1" size="mini" type="info" round @click="unDisabledUser(scope.row.id)">
            解除封禁
          </el-button>

          <el-button size="mini" type="primary" round @click="dialogFormBalanceVisible = true; updateUserBalance.userId = scope.row.id">
            修改余额
          </el-button>

          <el-button size="mini" type="primary" round @click="dialogFormProfitVisible = true; updateUserProfit.userId = scope.row.id">
            修改收益
          </el-button>

          <el-button size="mini" type="primary" round @click="dialogFormUpdateUserVisible = true; updateUserAccount.userId = scope.row.id">
            编辑资料
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      background
      layout="prev, pager, next"
      :page-size="size"
      :current-page="page"
      :total="total"
      @current-change="fetchData">
    </el-pagination>

    <el-dialog title="禁用账号" :visible.sync="dialogFormVisible">
      <div v-if="disabledUser.timeUnit !=='5' ">
        <el-input
          style="width: 150px; padding: 10px"
          v-model="disabledUser.time"
          placeholder="请输入禁用时间"></el-input>
      </div>
      <el-radio v-model="disabledUser.timeUnit" label="1">分钟</el-radio>
      <el-radio v-model="disabledUser.timeUnit" label="2">小时</el-radio>
      <el-radio v-model="disabledUser.timeUnit" label="3">天</el-radio>
      <el-radio v-model="disabledUser.timeUnit" label="4">年</el-radio>
      <el-radio v-model="disabledUser.timeUnit" label="5">永久</el-radio>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleDisabled">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="修改余额" :visible.sync="dialogFormBalanceVisible">
      <div>
        <el-input
          v-model="updateUserBalance.number"
          style="width: 150px; padding: 10px"
          placeholder="请输入修改金额"></el-input>
      </div>
      <el-radio v-model="updateUserBalance.type" label="1">增加</el-radio>
      <el-radio v-model="updateUserBalance.type" label="-1">减少</el-radio>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormBalanceVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleUpdateBalance">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="修改资料" :visible.sync="dialogFormUpdateUserVisible">
      <div>
        账号
        <el-input
          v-model="updateUserAccount.account"
          style="width: 150px; padding: 10px"
          placeholder="请输入账号"></el-input>
      </div>
      是否是靓号：
      <el-radio v-model="updateUserAccount.isBeautifulAccount" label="1">是</el-radio>
      <el-radio v-model="updateUserAccount.isBeautifulAccount" label="-1">否</el-radio>

      是否有转赠权限：
      <el-radio v-model="updateUserAccount.isGiveBalance" label="1">是</el-radio>
      <el-radio v-model="updateUserAccount.isGiveBalance" label="-1">否</el-radio>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormUpdateUserVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleUpdateAccount">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="修改收益" :visible.sync="dialogFormProfitVisible">
      <div>
        <el-input
          v-model="updateUserProfit.number"
          style="width: 150px; padding: 10px"
          placeholder="请输入修改金额"></el-input>
      </div>
      <el-radio v-model="updateUserProfit.type" label="1">增加</el-radio>
      <el-radio v-model="updateUserProfit.type" label="-1">减少</el-radio>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormProfitVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleUpdateProfit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getList, disable, unDisable, updateBalance, updateProfit,getUserDetail,updateAccount } from '@/api/user'

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      dialogFormVisible: false,
      dialogFormBalanceVisible: false,
      dialogFormProfitVisible: false,
      dialogFormUpdateUserVisible: false,
      updateUserBalance: {
        type: 0,
        number: 0,
        userId: null
      },
      updateUserAccount: {
        userId: null,
        account: null,
        isBeautifulAccount: null,
        isGiveBalance: null
      },
      updateUserProfit: {
        type: 0,
        userId: null,
        number: 0
      },
      disabledUser: {
        userId: 0,
        timeUnit: 0,
        time: 0
      },
      list: null,
      listLoading: true,
      keyword: '',
      status: '-10',
      page: 1,
      size: 10,
      total: 0
    }
  },
  created() {
    this.fetchData(this.page)
  },
  methods: {
    fetchData(val) {
      this.page = val
      this.listLoading = true
      getList({ page: this.page, size: this.size, keyword: this.keyword }).then(response => {
        this.total = response.total
        console.log(this.page)
        this.list = response.data
        this.listLoading = false
      })
    },
    handleUpdateAccount() {
      this.dialogFormUpdateUserVisible = false
      updateAccount(this.updateUserAccount).then(response =>{
        this.fetchData(this.page)
        this.$message({
          type: 'success',
          message: '操作成功!'
        })
      })
    },
    handleUpdateBalance() {
      this.dialogFormBalanceVisible = false
      updateBalance(this.updateUserBalance).then(res => {
        this.fetchData(this.page)
        this.$message({
          type: 'success',
          message: '操作成功!'
        })
      })
    },
    handleUpdateProfit() {
      this.dialogFormProfitVisible = false
      updateProfit(this.updateUserProfit).then(res => {
        this.fetchData(this.page)
        this.$message({
          type: 'success',
          message: '操作成功!'
        })
      })
    },
    handleSearch() {
      this.page = 1
      this.fetchData(this.page)
    },
    handleDisabled() {
      this.dialogFormVisible = false
      disable(this.disabledUser).then(res => {
        this.fetchData(this.page)
        this.$message({
          type: 'success',
          message: '操作成功!'
        })
      })
    },
    unDisabledUser(id) {
      unDisable(id).then(res => {
        this.fetchData(this.page)
        this.$message({
          type: 'success',
          message: '操作成功!'
        })
      })
    }
  }
}
</script>
